<script setup lang="ts">
import {RouterView} from 'vue-router'
import {YkMenu, YkContent, YkTaskBar, useYklibLoginStore} from 'yklib'
import router from "./router";
import {computed, ref, onMounted, provide, inject} from "vue";
import {storeToRefs} from 'pinia'

const emitter = inject('emitter') as any

const store = useYklibLoginStore()
const {user, isPywebview} = storeToRefs(store)

const taskBarContent = ref('')
const taskProgress = ref(0)
const displayProgress = computed(() => {
  // 当传入的taskProgress值＞0小于100时，任务栏上显示进度条
  return !(taskProgress.value <= 0.01 || taskProgress.value >= 99.99);
})

const display = computed(() => { // 当是登录页面时，菜单和任务栏不显示，否则显示
  return router.currentRoute.value.name !== 'login'
})

declare global {
  interface Window {
    pywebview: {
      api: any
    },
    debug: (text: string, type: any) => void // 输出信息至控制台
    printToTerm: (msg: string, level: 'info' | 'error' | 'warn' | 'command' | 'debug') => void // 输出信息至终端
    setTaskBar: (text: string, progress: number) => void // 输出信息至任务栏
  }
}

const options = [{
  label: "文件",
  submenu: [
    {
      label: '首页',
      click: () => {
        router.push('/home')
      }
    },
    {
      label: '关于',
      click: () => {
        router.push('/about')
      }
    },
    {
      label: '打开终端',
      click: () => {
        emitter.emit('YkContentOpenDrawer')
      }
    },
    {
      label: '保存设置',
      click: async () => {
        await store.saveAppSettings() // 保存应用设置
        await store.saveProjectSettings() // 保存项目设置
      }
    }
  ]
}]

/**
 * 输出日志信息至终端
 *
 * @param msg 日志信息
 * @param level 日志级别
 */
const printToTerm = (msg: string, level: 'info' | 'error' | 'warn' | 'command' | 'debug') => {
  // 添加包含日期和时间的时间戳
  emitter.emit('YkContentLog', {message: msg, level})
}

/**
 * 打开终端抽屉
 */
const openDrawer = () => {
  emitter.emit('YkContentOpenDrawer')
}

/**
 * 设置任务栏的文本信息和进度条的进度值
 *
 * @param text 文本信息
 * @param progress 进度条的进度值，0-100
 */
const setTaskBar = (text: string, progress: number) => {
  taskBarContent.value = text
  taskProgress.value = progress
}

onMounted(async () => {
  // 改为replace而不是push，避免产生历史记录
  await router.replace('/')
  window.printToTerm = printToTerm // 供python调用
  window.setTaskBar = setTaskBar // 供python调用
  await store.loadAppSettings() // 加载应用设置
  await store.loadProjectSettings() // 加载项目设置

  window.addEventListener('pywebviewready', async () => {
    window.pywebview.api.setWindow() // 调用python后端，将当前窗口绑定到python后端的基类上
    await store.loadAppSettings() // 再次加载应用设置，因为如果有webview环境，应用设置需要从python加载
    await store.loadProjectSettings() // 加载项目设置
    isPywebview.value = true;
  });
})

provide('printToTerm', printToTerm) // 提供printToTerm方法，供子组件使用
provide('setTaskBar', setTaskBar) // 提供setTaskBar方法，供子组件使用
provide('openDrawer', openDrawer) // 提供openDrawer方法，供子组件使用
</script>

<template>
  <div>
    <YkMenu v-if="display" :user="user" :height="24" :options="options"></YkMenu>
    <YkContent ref="content" class="bg-green-100" :menu-bar-height="24" :task-bar-height="24">
      <RouterView style="max-width: 8000px"/>
    </YkContent>
    <YkTaskBar v-if="display" :height="24">
      <div class="w-full grid grid-cols-4 pl-2">
        <div class="col-span-3"><span> {{ taskBarContent }} </span></div>
        <div class="col-span-1">
          <meter class="w-full" min="0" max="100" :value="taskProgress" v-if="displayProgress">{{ taskBarContent }}
          </meter>
        </div>
      </div>
    </YkTaskBar>
  </div>
</template>
